<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片的上传</title>
  <script>
    layui.use('upload', function() {
      var $ = layui.jquery;
      var upload = layui.upload;
      //普通图片上传
      var uploadInst = upload.render({
        elem: '#test1',
        //根据id上传图片
        url: 'http://localhost:8080/user?method=updateUserPhoto&id='+id, //改成您自己的上传接口
        method: 'post' , //可选项。HTTP类型，默认post
        auto: false, //选择文件后不自动上传
        bindAction: '#ListAction' ,//指向一个按钮触发上传
        choose: function(obj){
          //将每次选择的文件追加到文件队列
          var files = obj.pushFile();
          //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
          obj.preview(function(index, file, result) {
            console.log(index); //得到文件索引
            console.log(file); //得到文件对象
            console.log(result); //得到文件base64编码，比如图片
            $('#demo1').attr('src', result); //图片链接（base64）
            $.post("http://localhost:8080/user?method=updatePhoto", {result:result,id:id}, function(res) {
              console.log("updatePhoto请求成功");
            }, "text");//这里用的是post提交，如果不懂可以参考JQuery中ajax提
          })
        },
        done: function(res) {
          //如果上传失败
          if (res.code > 0) {
            return layer.msg('上传失败');
          }
          //上传成功
        },
        error: function() {
          //演示失败状态，并实现重传
          var demoText = $('#demoText');
          demoText.html('<span style="color: #c158ff;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
          demoText.find('.demo-reload').on('click', function() {
            uploadInst.upload();
          });
        }
      });
    });


  </script>
</head>
<body>

</body>
</html>